<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<input type="button" value="1" style="color:red" onclick="show1()" id="btn1" />
<input type="button" value="2" onclick="show2()" id="btn2" />
<input type="button" value="3" onclick="show3()" id="btn3"/>
<input type="button" value="4" onclick="show4()" id="btn4"/>
<input type="button" value="5" onclick="show5()" id="btn5"/>

<input type="button" value="上一张" onclick="shangYiZhang()"/>
<input type="button" value="下一张" onclick="xiaYiZhang()"/>

<input type="button" value="放大" onclick="da()"/>
<input type="button" value="缩小" onclick="xiao()" />

<input type="button" value="旋转" onclick="deg()"/>

<hr />
<img src="1.webp" width="500" id="pic" />

<script>
    function shangYiZhang() {  //上一张直接减
        var n =parseInt( pic.src.slice(-6,-5));//获取当前是第几张图片
        if(n == 1){ //如果已经是第一张了那就不能再减了，因该返回到最后一张
            pic.src ="5.webp";
            this.show5();
        }else{
            pic.src = n-1 +".webp";
            if(n-1 == 1){
                this.show1();
            }else if(n-1 == 2){
                this.show2();
            }else if(n-1==3){
                this.show3();
            }else if(n-1==4){
                this.show4();
            }else if(n-1==5){
                this.show5();
            }
        }
    }
    function xiaYiZhang() {  //上一张直接减
        var n =parseInt(pic.src.slice(-6,-5));//获取当前是第几张图片
        if(n == 5){ //如果已经是第一张了那就不能再减了，因该返回到最后一张
            pic.src ="1.webp";
            this.show1();
        }else{
            pic.src = n+1 +".webp";
            if(n+1 == 2){
                this.show2();
            }else if(n+1 == 3){
                this.show3();
            }else if(n+1 == 4){
                this.show4();
            } else if(n+1==5){
                this.show5();
            }
        }
    }
    function da() {
        pic.width += 100
    }
    function xiao() {
        pic.width -= 100
    }
    function deg(){
        pic.style.transform+= 'rotate('+50+'deg)';
    }
    function show2(){
        pic.src = "2.webp";
        btn1.style.color = "";
        btn3.style.color = "";
        btn4.style.color = "";
        btn5.style.color = "";
        btn2.style.color = "red";
    }

    function show1(){
        pic.src = "1.webp";
        btn2.style.color = "";
        btn3.style.color = "";
        btn4.style.color = "";
        btn5.style.color = "";
        btn1.style.color = "red";
    }
    function show3(){
        pic.src = "3.webp";
        btn1.style.color = "";
        btn2.style.color = "";
        btn4.style.color = "";
        btn5.style.color = "";
        btn3.style.color = "red";
    }
    function show4(){
        pic.src = "4.webp";
        btn1.style.color = "";
        btn2.style.color = "";
        btn3.style.color = "";
        btn5.style.color = "";
        btn4.style.color = "red";
    }
    function show5(){
        pic.src = "5.webp";
        btn1.style.color = "";
        btn2.style.color = "";
        btn3.style.color = "";
        btn4.style.color = "";
        btn5.style.color = "red";
    }
</script>